<template>
    <div>
        <el-form inline>
            <el-form-item>
                <el-button type="success" @click="xxx">添加</el-button>
            </el-form-item>
        </el-form>
        <el-table :data="form" border style="width: 100%">
            <el-table-column type="index" label="编号ID" width="150">
            </el-table-column>
            <el-table-column prop="realName" label="真实姓名" width="150">
            </el-table-column>
            <el-table-column prop="username" label="昵称" width="150">
            </el-table-column>
            <el-table-column label="角色" width="150">
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">

                    <el-button v-if="scope.row.realName !== '后台超管'">删除</el-button>

                </template>

            </el-table-column>

        </el-table>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="formdata.page"
            :page-sizes="[10, 20, 30, 40]" :page-size="formdata.pageSize" layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
        <el-dialog title="添加" :visible.sync="chuxian">
            <Jia :key="chuxian" @done="done"></Jia>
        </el-dialog>
    </div>
</template>
<script>
import { guanliyuan, guanliyuangai, guanliyuanjiao } from '@/api';
import Jia from '@/views/guanliyuan/jia.vue';

export default {
    components: {
        Jia
    },
    data() {
        return {
            total: 0,
            formdata: {
                page: 1,
                pageSize: 10
            },
            form: [],


            formda: [],
            chuxian: false
        }
    },
    methods: {

        handleSizeChange(val) {
            this.formdata.pageSize = val
            this.getguanliyuan()
        },
        handleCurrentChange(val) {
            this.formdata.page = val
            this.getguanliyuan()
        },


        done() {
            this.chuxian = false
            this.getguanliyuan()
        },
        getguanliyuan() {
            guanliyuan(this.formdata).then(res => {
                console.log(res);
                this.form = res.data.records
                this.total = res.data.total
            })
        },
        getguanliyuanjiao() {
            guanliyuanjiao().then(res => {
                console.log(res, 99911);


            })
        },
        xxx() {
            this.chuxian = true

        }

    },
    mounted() {
        this.getguanliyuan()
        this.getguanliyuanjiao()
    }


}
</script>